import React, { useState } from 'react'
import './Xx.scss'
import { Button, Popup, Space, Modal } from 'antd-mobile'
import { PicturesOutline, VideoOutline, UserCircleOutline } from 'antd-mobile-icons'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'


export default function Xx() {
  async function openCamera() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      const videoElement = document.getElementById('videoElement');
      videoElement.srcObject = stream;
      videoElement.onloadedmetadata = () => {
        videoElement.play();
      };
    } catch (error) {
      console.error('Error accessing camera:', error);
    }
  }

  //图片拍照上传
  const [selectedImage, setSelectedImage] = useState(null);
  const handleImageSelect = (event) => {
    const file = event.target.files[0];
    if (file) {
      // 如果需要预览图片
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedImage(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里处理上传逻辑，比如发送文件到服务器
    console.log('图片上传的逻辑');
  };


  let navigate = useNavigate()
  const [visible1, setVisible1] = useState(false)
  let img = localStorage.getItem('img')||'/imgs/1.jpg'
  let [name, setname] = useState('Koke')
  let [zws, setzws] = useState('UX设计师')
  let [gyw, setgyw] = useState('我是一名热情的设计师，通过以人为本的设计将问题转化为设计方案，我在这个领域有1年以上的经验，热情的设计师通过人人为本的设计将问题转换为设计解决方案。')
  return (
    <div >
      <div className='Xxhead'>
        <div onClick={() => {
          navigate('/app/my/bji')
        }}><LeftOutline /></div>
        <div>编辑个人资料</div>
        <div style={{ width: '20px', height: '100%' }}></div>
      </div>
      <div className='waiv'>
        <div className='wais'>
          <img src={img} alt="" />
        </div>
        <p style={{ color: 'black' }}><Button color='warning' fill='outline' size='small' onClick={() => {
          setVisible1(true)
        }}>编辑照片</Button></p>
      </div>
      <div className='inputs'>
        <div className='names'>
          <h3>姓名</h3>
          <input type="text" value={name} onChange={(e) => {
            setname(e.target.value)
            console.log(name);
          }}></input>
        </div>
        <div className='zw'>
          <h3>职位</h3>
          <input type="text" value={zws} onChange={(e) => {
            setzws(e.target.value)
          }}></input>


        </div>
        <div className='gyw'>
          <h3 style={{ marginBottom: '5px' }}>关于我</h3>
          <textarea value={gyw} onChange={(e) => {
            setgyw(e.target.value)
          }}></textarea>
        </div>
        <div className='buttons'>
          <Button color='warning' fill='solid' onClick={()=>{
            navigate('/app/my/bji')
          }}>
            确认修改
          </Button>
          <Button color='warning' fill='outline' onClick={() => {
            navigate('/app/my/bji')
            localStorage.setItem('img', '')
          }}>
            取消修改
          </Button>
        </div>
      </div>


      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '30vh' }}
      >
        {
          <div>
            <div className='xc'
              onClick={() => {
                setVisible1(false)
              }

              }>
              <PicturesOutline />
              从相册中选择一张
            </div>
            <div className='xj' onClick={()=>{
                navigate("/app/my/pz")
              }}>
              <VideoOutline />
              打开相机拍一张
            </div>
            <div className='xq' onClick={() => {
              setVisible1(false)
            }}>
              <UserCircleOutline />
              取消更改用户头像
            </div>
          </div>
        }

      </Popup>
      {/* 打开摄像头 */}
      {/* <video id="videoElement"></video> */}
    </div>
  )
}
